<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:block;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>

    $(function(){
         //1.准备一个数组
        let imgs = [
            "img/01.jpg",
            "img/02.jpg",
            "img/03.jpg",
            "img/04.jpg",
            "img/05.jpg",
            "img/06.jpg",
            "img/07.jpg",
            "img/08.jpg",
            "img/09.jpg",
            "img/10.jpg"];

        //2.定义定时器对象
        let time;
        //3.定义图片路径变量
        let img_src; 
        //4.为开始按钮绑定单击事件
        $("#startBtn").on("click",function(){
            //5.设置按钮状态
            $("#startBtn").prop("disabled",true);
            $("#stopBtn").prop("disabled",false);
            //6.设置定时器，循环显示图片
            time = setInterval(function(){
                //7.随机获取图片路径
                let random = parseInt(Math.random()*imgs.length);
                img_src = imgs[random];
                //8.将当前图片显示到小图片上
                $("#small").prop("src",img_src);
            },500)
        })
        
        //11.为停止按钮绑定单击事件
        $("#stopBtn").on("click",function(){
            //12.取消定时器
            clearInterval(time);
            //13.设置按钮状态
            $("#startBtn").prop("disabled",false);
            $("#stopBtn").prop("disabled",true);
            //14.将图片显示到大图片上
            $("#big").prop("src",img_src);
        })
    })
   
    
</script>
</html>